<template>
  <div class="group-body">
    <div class="mt10 flex">
      <el-input placeholder="搜索名称" v-model="search_group_name" />
      <el-button
        class="ml20"
        type="primary"
        @click="createClick(0)"
        v-permission="'store-goods_label_group-create'"
        >添加组</el-button
      >
    </div>

    <div
      class="group-box scrollbar-none mt10"
      :style="styles"
      v-loading="initLoading"
    >
      <div
        class="group-box-item default"
        :class="groupActive == -1 ? 'active' : ''"
        @click="getGroup(-1, 0)"
      >
        全部
      </div>
      <template v-for="(item, index) in groupList" :key="index">
        <div
          class="group-box-item"
          v-if="search_group_name == '' || item.search === true"
          :class="groupActive == index ? 'active' : ''"
          @click="getGroup(index, item.id)"
        >
          <div class="flex between">
            <div class="fw">{{ item.group_name }}</div>
            <el-dropdown>
              <div class="icon icon-more-1 more-btn"></div>
              <template #dropdown>
                <el-dropdown-menu>
                  <div v-permission="'store-goods_label_group-update'">
                    <el-dropdown-item
                      @click="createClick(item.id, item.group_name, item.desc)"
                      >编辑组</el-dropdown-item
                    >
                  </div>
                  <div v-permission="'store-goods_label_group-delete'">
                    <el-dropdown-item @click="delGroup(item.id)"
                      >删除组</el-dropdown-item
                    >
                  </div>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="mt10 flex">
            <div class="mr5 title">备注：</div>
            <div class="desc" v-if="item.desc">{{ item.desc }}</div>
            <div class="desc" v-else>无...</div>
          </div>
        </div>
      </template>
    </div>
  </div>
  <!-- 添加 -->
  <createGoodsLabelGroup
    ref="createGroupRef"
    @success="toInit()"
  ></createGoodsLabelGroup>
</template>
<script lang="ts">
export default {
  name: "goodsLabelGroup",
};
</script>
<script lang="ts" setup>
import { ref, onMounted, watch, getCurrentInstance, computed } from "vue";
import createGoodsLabelGroup from "./create-group.vue";
import {
  getGoodsLabelGroupList,
  delGoodsLabelGroup,
} from "@/api/store/goods_label";
import { Result, ResultError } from "@/types";
import { ElMessageBox } from "element-plus";

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    height?: string;
  }>(),
  {
    height: "",
  }
);

const emit = defineEmits(["change", "init"]);

const createGroupRef = ref<HTMLElement>();

const search_group_name = ref<string>("");

const initLoading = ref<boolean>(true);

const groupList = ref<any>([]);

const groupActive = ref<number>(-1);

const getGroup = (index: number, id: unknown | number) => {
  groupActive.value = index;
  emit("change", id);
};

const createClick = (id: number, name: string = "", desc: string = "") => {
  proxy?.$refs["createGroupRef"]?.open(id, name, desc);
};

const toInit = () => {
  let obj: any = {};
  initLoading.value = true;
  getGoodsLabelGroupList()
    .then((res: Result) => {
      initLoading.value = false;
      groupList.value = res.data;
      emit("init", groupList.value);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const delGroup = (id: number) => {
  ElMessageBox.confirm("确定删除?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delGoodsLabelGroup({ id })
        .then((res: Result) => {
          getGroup(-1,-1);
          $utils.successMsg(res);
          toInit();
        })
        .catch((err: ResultError) => {
          $utils.errorMsg(err);
        });
    })
    .catch(() => {});
};

const styles = computed(() => {
  return {
    height: props.height,
  };
});
watch(
  () => search_group_name.value,
  (val) => {
    groupList.value?.forEach((item: any) => {
      item.search = item.group_name.indexOf(val) !== -1 ? true : false;
    });
  }
);

onMounted(() => {
  toInit();
});
defineExpose({ getGroup });
</script>

<style scoped>
.group-body {
  width: 100%;
  height: calc(100% - 50px);
}
.group-box {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.group-box-item {
  width: calc(100% - 24px);
  background: #f4f7fa;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 16px;
  cursor: pointer;
  user-select: none;
}
.group-box-item.default {
  width: calc(100% - 26px);
  border: 1px solid #f4f7fa;
}
.group-box-item .title,
.group-box-item .desc {
  color: var(--base-grey);
}
.group-box-item.active {
  background: var(--base-default);
  color: #ffffff;
}
.group-box-item.active .title,
.group-box-item.active .desc,
.group-box-item.active .icon {
  color: #ffffff;
}
</style>